<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
      rel="stylesheet"
    />
    <style>
      body {
        /* background: rgb(221, 208, 208); */
        /* background:#333; */
        font-family: 'Arial';
        /* font-size: 18px !important; */
      }
      h1 {
        color: grey;
      }
      .mermaid2 {
        display: none;
      }
      .mermaid svg {
        /* font-size: 18px !important; */
        background-color: #efefef;
        background-image:
          radial-gradient(#fff 51%, transparent 91%), radial-gradient(#fff 51%, transparent 91%);
        background-size: 20px 20px;
        background-position:
          0 0,
          10px 10px;
        background-repeat: repeat;
      }
      .malware {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 150px;
        background: red;
        color: black;
        display: flex;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: monospace;
        font-size: 72px;
      }
      /* tspan {
        font-size: 6px !important;
      } */
    </style>
  </head>
  <body>
    <pre id="diagram" class="mermaid">
stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]    </pre
    >
    <pre id="diagram" class="mermaid2">
flowchart RL
    subgraph "`one`"
      a1 -- l1 --> a2
      a1 -- l2 --> a2
    end
    </pre>
    <pre id="diagram" class="mermaid">
flowchart RL
    subgraph "`one`"
      a1 -- l1 --> a2
      a1 -- l2 --> a2
    end
    </pre>
    <pre id="diagram" class="mermaid2">
flowchart
id["`A root with a long text that wraps to keep the node size in check. A root with a long text that wraps to keep the node size in check`"]</pre
    >
    <pre id="diagram" class="mermaid2">
flowchart LR
    A[A text that needs to be wrapped wraps to another line]
    B[A text that needs to be<br/>wrapped wraps to another line]
    C["`A text that needs to be wrapped to another line`"]</pre>
    <pre id="diagram" class="mermaid2">
flowchart LR
    C["`A text
        that needs
        to be wrapped
        in another
        way`"]
  </pre
    >
    <pre id="diagram" class="mermaid">
      classDiagram-v2
        note "I love this diagram!\nDo you love it?"
    </pre>
    <pre id="diagram" class="mermaid">
    stateDiagram-v2
    State1: The state with a note with minus - and plus + in it
    note left of State1
      Important information! You can write
      notes with . and  in them.
    end note    </pre
    >
    <pre id="diagram" class="mermaid2">
mindmap
root
  Child3(A node with an icon and with a long text that wraps to keep the node size in check)
</pre
    >
    <pre id="diagram" class="mermaid2">
      %%{init: {"theme": "forest"} }%%
mindmap
    id1[**Start2**<br/>end]
      id2[**Start2**<br />end]
      %% Another comment
      id3[**Start2**<br>end] %% Comment
      id4[**Start2**<br >end<br    >the very end]
    </pre>
    <pre id="diagram" class="mermaid2">
mindmap
    id1["`**Start2**
    second line 😎 with long text that is wrapping to the next line`"]
      id2["`Child **with bold** text`"]
      id3["`Children of which some
      is using *italic type of* text`"]
      id4[Child]
      id5["`Child
      Row
      and another
      `"]
    </pre>
    <pre id="diagram" class="mermaid2">
mindmap
    id1("`**Root**`"]
      id2["`A formatted text... with **bold** and *italics*`"]
      id3[Regular labels works as usual]
      id4["`Emojis and unicode works too: 🤓
      शान्तिः سلام  和平 `"]

    </pre>
    <pre id="diagram" class="mermaid">
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
flowchart TB
  %% I could not figure out how to use double quotes in labels in Mermaid
  subgraph ibm[IBM Espresso CPU]
    core0[IBM PowerPC Broadway Core 0]
    core1[IBM PowerPC Broadway Core 1]
    core2[IBM PowerPC Broadway Core 2]

    rom[16 KB ROM]

    core0 --- core2

    rom --> core2
  end

  subgraph amd["`**AMD** Latte GPU`"]
    mem[Memory & I/O Bridge]
    dram[DRAM Controller]
    edram[32 MB EDRAM MEM1]
    rom[512 B SEEPROM]

    sata[SATA IF]
    exi[EXI]

    subgraph gx[GX]
      sram[3 MB 1T-SRAM]
    end

    radeon[AMD Radeon R7xx GX2]

    mem --- gx
    mem --- radeon

    rom --- mem

    mem --- sata
    mem --- exi

    dram --- sata
    dram --- exi
  end

  ddr3[2 GB DDR3 RAM MEM2]

  mem --- ddr3
  dram --- ddr3
  edram --- ddr3

  core1 --- mem

  exi --- rtc
  rtc{{rtc}}
</pre
    >
    <pre id="diagram" class="mermaid2">
%%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
flowchart TB
  %% I could not figure out how to use double quotes in labels in Mermaid
  subgraph ibm[IBM Espresso CPU]
    core0[IBM PowerPC Broadway Core 0]
    core1[IBM PowerPC Broadway Core 1]
    core2[IBM PowerPC Broadway Core 2]

    rom[16 KB ROM]

    core0 --- core2

    rom --> core2
  end

  subgraph amd["`**AMD** Latte GPU`"]
    mem[Memory & I/O Bridge]
    dram[DRAM Controller]
    edram[32 MB EDRAM MEM1]
    rom[512 B SEEPROM]

    sata[SATA IF]
    exi[EXI]

    subgraph gx[GX]
      sram[3 MB 1T-SRAM]
    end

    radeon[AMD Radeon R7xx GX2]

    mem --- gx
    mem --- radeon

    rom --- mem

    mem --- sata
    mem --- exi

    dram --- sata
    dram --- exi
  end

  ddr3[2 GB DDR3 RAM MEM2]

  mem --- ddr3
  dram --- ddr3
  edram --- ddr3

  core1 --- mem

  exi --- rtc
  rtc{{rtc}}
</pre
    >

    <br />
    <pre id="diagram" class="mermaid2">
flowchart TB
  %% I could not figure out how to use double quotes in labels in Mermaid
  subgraph ibm[IBM Espresso CPU]
    core0[IBM PowerPC Broadway Core 0]
    core1[IBM PowerPC Broadway Core 1]
    core2[IBM PowerPC Broadway Core 2]

    rom[16 KB ROM]

    core0 --- core2

    rom --> core2
  end

  subgraph amd[AMD Latte GPU]
    mem[Memory & I/O Bridge]
    dram[DRAM Controller]
    edram[32 MB EDRAM MEM1]
    rom[512 B SEEPROM]

    sata[SATA IF]
    exi[EXI]

    subgraph gx[GX]
      sram[3 MB 1T-SRAM]
    end

    radeon[AMD Radeon R7xx GX2]

    mem --- gx
    mem --- radeon

    rom --- mem

    mem --- sata
    mem --- exi

    dram --- sata
    dram --- exi
  end

  ddr3[2 GB DDR3 RAM MEM2]

  mem --- ddr3
  dram --- ddr3
  edram --- ddr3

  core1 --- mem

  exi --- rtc
  rtc{{rtc}}
</pre
    >
    <br />
    &nbsp;
    <pre id="diagram" class="mermaid2">
      flowchart LR
  B1 --be be--x B2
  B1 --bo bo--o B3
  subgraph Ugge
      B2
      B3
      subgraph inner
          B4
          B5
      end
      subgraph inner2
        subgraph deeper
          C4
          C5
        end
        C6
      end

      B4 --> C4

      B3 -- X --> B4
      B2 --> inner

      C4 --> C5
  end

  subgraph outer
      B6
  end
  B6 --> B5
  </pre
    >
    <pre id="diagram" class="mermaid2">
sequenceDiagram
    Customer->>+Stripe: Makes a payment request
    Stripe->>+Bank: Forwards the payment request to the bank
    Bank->>+Customer: Asks for authorization
    Customer->>+Bank: Provides authorization
    Bank->>+Stripe: Sends a response with payment details
    Stripe->>+Merchant: Sends a notification of payment receipt
    Merchant->>+Stripe: Confirms the payment
    Stripe->>+Customer: Sends a confirmation of payment
    Customer->>+Merchant: Receives goods or services
        </pre
    >
    <pre id="diagram" class="mermaid2">
mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid
    </pre>
    <br />
    <pre id="diagram" class="mermaid2">
  example-diagram
    </pre>

    <!-- <div id="cy"></div> -->
    <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
    <!-- <script src="./mermaid-example-diagram-detector.js"></script>    -->
    <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
    <!-- <script src="./mermaid.js"></script> -->

    <scrpt>
      // import mindmap from '../../packages/mermaid-mindmap/src/detector'; // import example from
      '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs'; import mermaid
      from './mermaid.esm.mjs'; // await mermaid.registerExternalDiagrams([example]);
      mermaid.parseError = function (err, hash) { // console.error('Mermaid error: ', err); };
      mermaid.initialize({ // theme: 'forest', startOnLoad: true, logLevel: 0, flowchart: { //
      defaultRenderer: 'elk', useMaxWidth: false, // htmlLabels: false, htmlLabels: true, }, //
      htmlLabels: false, gantt: { useMaxWidth: false, }, useMaxWidth: false, }); function callback()
      { alert('It worked'); } mermaid.parseError = function (err, hash) { console.error('In parse
      error:'); console.error(err); }; // mermaid.test1('first_slow', 1200).then((r) =>
      console.info(r)); // mermaid.test1('second_fast', 200).then((r) => console.info(r)); //
      mermaid.test1('third_fast', 200).then((r) => console.info(r)); // mermaid.test1('forth_slow',
      1200).then((r) => console.info(r));
    </scrpt>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/mermaid@10.2.0/dist/mermaid.min.js"
    ></script>
    <script type="module">
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10.2.0/dist/mermaid.min.js';
      (function () {
        mermaid.initialize({ startOnLoad: false });
        const elements = document.getElementsByClassName('mermaid');
        console.log(elements);
        let id = 0;
        [...elements].forEach((elem) => {
          const insertSvg = function (svgCode) {
            elem.innerHTML = svgCode;
          };

          console.log(atob(elem.innerText));

          mermaid.render(`graphDiv-${id++}`, atob(elem.innerText), insertSvg);
        });
      })();
    </script>
  </body>
</html>
